import React, {useState, useEffect} from'react';
import { Steps, Space, NavBar } from 'antd-mobile'
import { useNavigate } from'react-router-dom';
import axios from 'axios'


// 预约记录页面
function JiLu() {
    const { Step } = Steps
    const navigate = useNavigate();
    let [accessToken, setaccessToken] = useState(JSON.parse(localStorage.getItem('accessToken')) || "")
    const [data, setData] = useState([])
    const getList = () => {
        axios.get(`http://127.0.0.1:3000/xin/yuyue`).then(res=>{
            if(res.data.code===200){
                setData(res.data.result)
            }
        },
        {
            headers: {
              'Authorization': accessToken
            }
        })
    }
    useEffect(()=>{
        getList()
    },[])

    // 点击返回外出页面
    const back = () => {
        navigate('/waichu')
    }
    
    return (
        <div>
            <NavBar onBack={back} style={{backgroundColor: "#6a7d8f", color: "white", height: "6rem"}}>预约记录</NavBar>
            <Steps  direction='vertical' current={3}  
                style={{
                    '--title-font-size': '1.7rem',
                    '--description-font-size': '1.5rem',
                    '--indicator-margin-right': '1.2rem',
                    '--icon-size': '10rem',
                }}
            >
               {
                   data.map((item, index) => {
                       return (
                            <Step key={index} title={item.title}
                                description={
                                    <Space block direction='vertical'>
                                        <div style={{color: "#336699"}}>{item.renwu}</div>
                                        <div >{item.miaoshu}</div>      
                                    </Space>
                                }
                            />
                       )
                   })
               }
            </Steps>
        </div>
    )
}

export default JiLu;